<template>
  <div class="myBill">
    <Card>
      <Divider>我的账单</Divider>
      <div style="text-align:center">
        <Table :data="myBillData" :columns="myBillColumns" stripe  show-summary :summary-method="handleSummary"></Table>
        <Page :total="total" show-elevator style="margin-top: 10px"/>
      </div>
    </Card>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "myBill",
    data() {
      return {
        total:0,
        sumGold:'',//总金额
        sumNoGold:'',//总未支付金额
        myBill:{
          pageNumber:1,
          pageSize:10,
          startTime:null,
          endTime:null,
          billId:'',
          gold:'',
          userId:'',
          billState:'',
          createTime:null,
        },
        myBillData:[{
          billId:'',
          gold:'',
          billState:'',
          userId:'',
          createTime:null,
        }],
        myBillColumns:[
          {
            title: '账单编号',
            key: 'billId'
          },
          {
            title: '创建日期',
            key: 'createTime'
          },
          {
            title: '金额',
            key: 'gold'
          },
          {
            title: '支付状态',
            key: 'billState',
            render: (h, params) => {
              let state = '';
              if (params.row.billState=='0'){
                this.state = '未完成'
              }else if(params.row.billState=='1'){
                this.state = '已完成'
              }else{
                this.state = '未支付'
              }
              return h('div', [
                h('div', {
                }, this.state),
              ]);
            }
          },
         ]
      }
    },
    methods: {
      getBillData(){
        axios.get('http://localhost:8888/billController/queryAllBillById',{params: this.myBill}).then(res =>{
          this.myBillData = res.data.list
          this.total = res.data.total
        })
      },

  handleSummary ({ columns, data }) {
    const sums = {};
    columns.forEach((column, index) => {
      const key = column.key;
      if (index === 1) {
        sums[key] = {
          key,
          value: '合计'
        };
        return;
      }
      const values = data.map(item => Number(item[key]));
      if (!values.every(value => isNaN(value))) {
        const v = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        // if (index === 3) {
        //   sums[key] = {
        //     key,
        //     value: '未支付'+ v + '元'
        //   };
        // }else
          if (index === 2) {
          sums[key] = {
            key,
            value: '总金额'+ v + '元'
          };
        }else {
          sums[key] = {
            key,
            value: ''
          };
        }
      } else {
        sums[key] = {
          key,
          value: ''
        };
      }
    });
    return sums;
  }
    },
    mounted() {
      this.myBillData=[{
          billId:' ',
          gold:'11',
          userId:'',
          billState:'',
          createTime:null,
      }]
      this.myBill.userId = this.$getCookie("userId")
      this.getBillData();
    }
  }
</script>

<style scoped>
  .myBill{
    margin:20px 0 0 20px
  }
</style>
